<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6">
        <h1>职称管理</h1>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="danger" @click="deleteList">删除</el-button>
        <el-button type="primary" @click="openAdminDialog('')">新增职称</el-button>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入职称名称"></el-input>
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="searchList">搜索</el-button>
        </el-col>
      </el-row>

      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="name" label="职称名称"></el-table-column>
        <el-table-column align="center" prop="fee" label="默认挂号费（元）"></el-table-column>
        <el-table-column align="center" prop="message" label="职称描述"></el-table-column>
        <el-table-column align="center" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="switchStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加时间">
          <template slot-scope="scope">
            {{scope.row.createTime}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openAdminDialog(scope.row.id)"><i class="el-icon-edit" style="font-size: 20px;margin-right: 20px;"></i></el-button>
            <el-button type="text" style="color: red;" @click="DeleteItem(scope.row.id)"><i class="el-icon-delete" style="font-size: 20px;"></i></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" align="middle" style="margin-top: 20px;">
        <el-col :span="24" style="text-align: right;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum" :page-sizes="[10, 20, 30]" :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
          </el-pagination>
        </el-col>
      </el-row>


      <!-- 新增、修改弹框 -->
      <el-dialog :visible.sync="dialogVisible" title="编辑角色信息" width="1000" :close-on-click-modal="false"
        :close-on-press-escape="false" :show-close="false" style="padding: 40px">
        <el-form label-width="80px" :model="professionalFormData" :rules="rules" ref="ruleForm">
          <el-form-item label="职称名称" prop="name">
            <el-input v-model="professionalFormData.name" type="text" placeholder="请输入职称名称"></el-input>
          </el-form-item>
          <el-form-item label="挂号费" prop="fee">
            <el-input v-model="professionalFormData.fee" placeholder="请输入挂号费金额(元)"></el-input>
          </el-form-item>
          <el-form-item label="职称描述" prop="message">
            <el-input v-model="professionalFormData.message" placeholder="请输入职称描述"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="professionalFormData.status" active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="SaveUser">保存</el-button>
            <el-button type="danger" @click="handleClose">取消</el-button>
          </div>
        </template>
      </el-dialog>

    </el-card>

  </div>
</template>
<script>
  import { validatePhone} from '@/utils/common.js'
  import { getProfessionList,save,Delete,detail} from '@/api/Profession'




  export default {
    data() {
      return {
        searchVal: '', //搜索框查询
        tableData: [], //列表数据
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },

        // 弹框参数
        dialogVisible: false,
        professionalFormData: {
          id:'',
          name: '',
          fee: '',
          message: '',
          status: true,
        },
        rules: {
          name:[{required: true,message: '请输入职称名称',trigger: 'blur'}],
          fee:[{required: true,message: '请输入挂号费金额',trigger: 'blur'}],
          message:[{required: true,message: '请输入职称描述',trigger: 'blur'}],
        },
        roleData:[
          {label:'白',val:'10'}
        ],
        deleteArr:[],//需要删除列表id集合

      }
    },
    mounted() {
      this.init();
    },
    methods: {

      //初始化
      init() {
        //获取列表数据
        this.getProfessionList();
      },

      //列表-------更新状态按钮
      switchStatus(item) {
        this.professionalFormData = item;
        this.save(this.roleFormData);
      },

      //列表----搜索按钮
      searchList() {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = 10;
        this.getProfessionList();
      },

      //分页
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.searchVal = '';
        this.getProfessionList();
        console.log(`每页 ${val} 条`);
      },

      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.listQuery.pageSize = 10;
        this.searchVal = '';
        this.getProfessionList();
        console.log(`当前页: ${val}`);
      },

      //列表----多选事件
      handleSelectionChange(e) {
        this.deleteArr = e;
      },

      //列表----批量删除
      deleteList(){

        if(this.deleteArr.length <=0){
          this.$message.warning("请选择需要删除的列表")
            return
        }

        this.deleteFun('');
      },

      //列表---单个删除
      DeleteItem(id){
        this.deleteFun(id);
      },

      //封装删除逻辑
      deleteFun(id){
        console.log(id)
         let arr = [];
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
           center: true
         }).then(() => {

           if(id == ''){
             //批量删除
             this.deleteArr.forEach(item=>{
               arr.push(item['id']);
             })
               this.Delete(arr);
           } else {
             //单个删除
             arr.push(id);
             this.Delete(arr);
           }

         }).catch(() => {
           this.$message({
             type: 'info',
             message: '已取消删除'
           });
         })
      },


      //弹框数据初始化
      initFormData() {
         this.professionalFormData.id = '';
        this.professionalFormData.name = '';
        this.professionalFormData.fee = '';
        this.professionalFormData.message = '';
        this.professionalFormData.status = true;
      },

      //列表----打开编辑管理员信息弹框按钮事件
      openAdminDialog(id) {

        if(id == ''){
          //新增
          this.initFormData();
          this.dialogVisible = true;
        } else {
          //编辑
          this.professionalFormData.id = id;
          this.detail();
          console.log('编辑')
        }


      },


      //弹框----表单参数验证
      ValidFormData(){
        if(!this.professionalFormData.name || !this.professionalFormData.name.trim()){
          this.$message.warning("请输入职称名称")
          return false;
        }

        if(!this.professionalFormData.fee || !this.professionalFormData.fee.trim()){
          this.$message.warning("请输入挂号费金额")
          return false;
        }

        if(!this.professionalFormData.message || !this.professionalFormData.message.trim()){
          this.$message.warning("请输入职称描述")
          return false;
        }

        return true;
      },

      //弹框-----保存按钮
      SaveUser() {
        if(this.ValidFormData()){
          this.save(this.professionalFormData);
        }

      },

      //弹框----取消按钮
      handleClose() {
        this.dialogVisible = false;
        this.initFormData();
         this.$refs['ruleForm'].resetFields();
      },


      //获取列表数据接口
      getProfessionList() {
        let that = this;
        let params = {
          name: this.searchVal,
          pageNum: this.listQuery.pageNum,
          pageSize: this.listQuery.pageSize
        }
        getProfessionList(params).then(res => {
          let data = res['data'];
          that.listQuery.total = data['total'];
          that.tableData = data['list'];
        });
      },

      //保存接口
      save(params){
        let that = this;
        save(params).then(res=>{
          if(res.code == 2000){
            that.$message.success("保存成功");
            that.dialogVisible = false;
            that.initFormData();
            that.listQuery.pageNum = 1;
            that.listQuery.pageSize = 10;
            that.searchVal = '';
            that.getProfessionList();
          }

        });
      },

      //批量删除
      Delete(arrIds){
        let that = this;
        let params = {
           arrIds:arrIds
        }
        Delete(params).then(res=>{

           if(res.code == 2000){
             that.$message.success("删除成功");
              that.listQuery.pageNum = 1;
              that.listQuery.pageSize = 10;
              that.searchVal = '';
              that.getProfessionList();
           }

        });
      },

      //根据id查详情
      detail(){
        let that = this;
        detail(this.professionalFormData.id).then(res=>{
          if(res.code == 2000){
            let data = res['data'];
            that.professionalFormData = data;
            that.dialogVisible = true;
          }

        })
      }


    }
  }
</script>


<style scoped>

</style>
